<template>
  <div class="wrap">
    <div class="login-box">
      <img class="img-wh" src="../assets/image/yz-bg.png" alt="" />
      <div class="login">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
          <!-- <h3 class="title">账号登录</h3> -->
          <div class="title">
            <!-- <img class="img-wh" src="../assets/image/new-logo.png" alt="" /> -->
            <span>油福同享智慧管理平台</span>
          </div>
          <div class="login-admin">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名">
                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码"
                @keyup.enter.native="handleLogin">
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码"
                style="width: 67%; margin-right: 3%" @keyup.enter.native="handleLogin">
                <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img" />
              </div>
            </el-form-item>
          </div>
          <el-form-item style="width: 100%">
            <el-button :loading="loading" size="medium" style="width: 100%;border-radius: 5px;background-color: #FD6B00;"
              @click.native.prevent="handleLogin">
              <span v-if="!loading" class="text-color">登 录</span>
              <span v-else class="text-color">登 录 中...</span>
            </el-button>
          </el-form-item>
          <div style="width: 100%; text-align: center; margin-bottom: 10px;">
            <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住登录状态</el-checkbox>
          </div>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      cookiePassword: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
        code: [
          { required: true, trigger: "change", message: "验证码不能为空" },
        ],
      },
      loading: false,
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCode();
    this.getCookie();
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
            })
            .catch(() => {
              this.loading = false;
              this.getCode();
            });
        }
      });
    },
  },
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.img-wh {
  width: 100%;
  height: 100%;
}

.text-color {
  color: #fff;
}

/* 选中后的字体颜色 */
::v-deep .el-checkbox__inner:hover {
  border-color: #FD6B00 !important;
}

::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #FD6B00 !important;
}

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #FD6B00 !important;
}

/* 选中后小圆点的颜色 */
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #FD6B00 !important;
  border-color: #FD6B00 !important;
}

.wrap {
  height: 100%;
  background: url(../assets/image/bg.png) 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-box {
    width: 92%;
    height: 92%;
    position: relative;

    .login {
      position: absolute;
      top: 139px;
      right: 113px;
      width: 400px;
      height: 400px;
      border-radius: 5px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40px;

      .login-form {
        width: 100%;
        box-sizing: border-box;
        .el-input {
          height: 50px;

          input {
            height: 50px;
          }
        }

        // .input-icon {
        //   height: 50px;
        //   width: 14px;
        //   margin-left: 2px;
        // }

        .login-admin {
          width: 100%;
          height: 60%;
          // display: flex;
          // justify-content: space-between;
          // flex-direction: column;
        }
      }

      .title {
        width: 100%;
        // height: 23px;
        font-size: 24px;
        font-family: Lantinghei SC;
        font-weight: 600;
        color: #010101;
        line-height: 48px;
        text-align: center;
        margin: 40px 0 20px 0;
      }

      .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
      }

      .login-code {
        width: 29%;
        height: 50px;
        float: right;

        img {
          width: 100%;
          height: 50px;
          cursor: pointer;
          vertical-align: middle;
        }
      }

      .login-code-img {
        height: 38px;
      }
    }
  }

  // 中间
  .login-main {
    height: 78%;
    width: 100%;
    min-width: 1000px;
    position: relative;
    // min-height: 800px;
    margin-bottom: 20px;

    .main-img {
      position: absolute;
      z-index: -1;
      width: 100%;
      min-width: 1000px;
      height: 100%;
    }

    // 登录按钮样式
    .el-form-item {
      height: 100%;
    }

    .el-form-item__content {
      text-align: center;
      height: 8%;
    }

    .el-button--medium {
      width: 50%;
      margin-top: 8%;
      // box-sizing: border-box;
      border-radius: 38px;
      background-color: #ff5a00;
      border-color: #ff5a00;

      span {
        font-size: 24px;
      }
    }
  }
}

@media screen and (min-width: "1920px") {
  .wrap {
    .login-box {
      .login {
        position: absolute;
        right: 190px;
        top: 190px;
        width: 460px;
        height: 476px;
      }
    }
  }
}

// 底部
.el-login-footer {
  height: 5%;
  width: 100%;
  text-align: center;
  color: #898a87;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
